<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="cache-control" content="no-cache" />
    <title>告警事件</title>
    <link rel="stylesheet" href="../../assets/less/base/main.css" />
    <link rel="stylesheet" href="../../assets/less/message/notice.css" />
</head>

<body>
    <div id="app">
        <div class="iot-device-message" style="padding: 0 24px" :style="{'height': height}" v-show="isShow">
            <div class="page-list">
                <template v-if="messageList&&messageList.length > 0">
                    <div class="message-box" v-for="(item,index) in messageList" :key="index">
                        <div class="message-header">
                            <div class="message-title-badge message-title-badge-red"></div>
                            <span class="message-title">{{getMessageTitle(item.title)}}</span>
                            <img src="../../assets/images/more.png" class="message-title-extra"
                                @click="handleAction(item)"></img>
                        </div>
                        <div class="message-content" :style="{ width: item.imageContent ? '74%' : '100%' }">
                            {{ item.textContent }}</div>
                        <img :src="item.imageContent" class="iot-el-img message-content-img"
                            v-if="item.imageContent"></img>
                        <div class="message-footer">
                            <div class="footer-time">{{ item.createDateTime }}</div>
                            <div class="footer-deal">{{ item.confirmor ? '已处理' : '未处理' }}</div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
    <script src="../../config.js"></script>
    <script src="../../assets/js/main.js" type="module"></script>
    <script type="module">
        // 右侧图表页面ID
        const _RIGHT_CHART_PAGE_NAME_ = '大屏右侧数据面板'
        // 创建Vue实例
        new Vue({
            el: '#app', // 绑定元素
            data: {
                pageNo: 1,
                pageSize: 1,
                messageList: [],
                pageType: 'message',
                height: '500px',
                isShow: false,
                connection: null,
            },
            mounted() {
                var result = util.queryUrlParams(location.href)
                let pageType = util.isNotEmpty(result) ? result['pageType'] : 'message'
                this.pageType = pageType || 'message'
                let height = util.isNotEmpty(result) ? result['height'] : '500'
                this.height = (height || '500') + 'px'
                this.isShow=true
                
                let messageData = util.isNotEmpty(result) ? result['messageData'] : null
                if(messageData){
                    var list = [messageData]
                        if (list && list.length > 0) {
                            list.forEach(x => {
                                let content = x.content
                                if (content && Array.isArray(content)) {
                                    let imageContent = content.find(con => con.contentType === 2 || con.contentType === 3)
                                    let imageContentStr = imageContent ? imageContent.content : ''
                                    // x.imageContent = imageContentStr.startsWith('http') ? imageContentStr : 'http://192.168.2.13:8883/' + imageContentStr
                                    x.imageContent = imageContentStr ? (imageContentStr.startsWith('http') ? imageContentStr : location.origin + '/' + imageContentStr) : ''
                                    // x.imageContent = require('../assets/img/face2.png')
                                    x.textContent = content
                                        .filter(con => con.contentType < 2)
                                        .map(c => c.content)
                                        .join(';')
                                }
                            })
                            this.messageList = [...list]
                        }
                }
            },
            methods: {                
                handleAction(row) {
                    // 调用定位接口
                    let deviceId = row.device ? row.device.id : ''
                    if (deviceId) {
                        Fuck("func_search", null, "focus", deviceId);
                    }
                },
                getMessageTitle(title) {
                    let str = ''
                    if (title && title.indexOf('|') != -1) {
                        let arr = title.split('|')
                        if (arr.length >= 3) {
                            str = arr[0] + '-' + arr[1] + ' 触发了 ' + arr[2] + ' 事件'
                        } else if (arr.length == 2) {
                            str = arr[0] + '触发了 ' + arr[1] + ' 事件'
                        }
                    }
                    return str
                }
            }
        })
    </script>
</body>

</html>